<template>
	<view class="">
		<view class="service-container">
			<view class="report-list">
				<view v-if="reports.length === 0" class="empty-state">
					<image src="/static/empty-state.png" class="empty-icon"></image>
					<text>暂无报告数据</text>
				</view>

				<view v-else v-for="(report, index) in reports" :key="index" class="report-item"
					@click="viewReportDetail(report)">
					<view class="report-info">
						<text class="report-title">{{ report.title }}</text>
						<text class="report-date">{{ report.date }}</text>
						<text class="report-dept">{{ report.department }}</text>
					</view>
					<view class="report-status" :class="report.status">
						<text>{{ getReportStatusText(report.status) }}</text>
						<text class="arrow"></text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				activeReportTab: 0,
				reports: [{
						id: 1,
						title: '血常规检验',
						date: '2025-03-20',
						department: '检验科',
						status: 'ready'
					},
					{
						id: 2,
						title: '尿常规检验',
						date: '2025-03-20',
						department: '检验科',
						status: 'ready'
					},
					{
						id: 3,
						title: 'CT检查',
						date: '2025-03-18',
						department: '放射科',
						status: 'processing'
					},
				],
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getReportStatusText(status) {
				const statusMap = {
					'ready': '已出报告',
					'processing': '检验中',
					'waiting': '待采样'
				};
				return statusMap[status] || '未知状态';
			},
			viewReportDetail(report) {
				if (report.status !== 'ready') {
					uni.showToast({
						title: '报告尚未出具',
						icon: 'none'
					});
					return;
				}

				uni.navigateTo({
					url: `/pages/report-detail/index?id=${report.id}`
				});
			}
		}
	}
</script>

<style>
	.service-container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.tabs {
		display: flex;
		height: 80rpx;
		width: 100%;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: sticky;
		/* 新增属性，实现吸顶效果 */
		top: 0;
		/* 新增属性，固定在顶部 */
		z-index: 1;
		/* 新增属性，确保在其他内容之上 */
	}

	.tab {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab.active {
		color: #2979ff;
		/* border-bottom: 4rpx solid #3295e6; */
	}


	.tab-line {
		position: absolute;
		bottom: 0;
		width: 60rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	.report-list {
		background-color: white;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
	}

	.empty-icon {
		width: 128rpx;
		height: 128rpx;
		margin-bottom: 20rpx;
	}

	.report-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.report-info {
		display: flex;
		flex-direction: column;
	}

	.report-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.report-date,
	.report-dept {
		font-size: 24rpx;
		color: #888;
		margin-top: 10rpx;
	}

	.report-status {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.report-status.ready {
		color: #52c41a;
	}

	.report-status.processing {
		color: #faad14;
	}

	.report-status.waiting {
		color: #999;
	}
</style>